<template>
  <div class="home-page">
    <div class="home-top-img-bg-box top-img-bg-box">
      <div class="home-top-content">
        <div class="main-content">
          <div class="d1">行业领先的区块链解决方案服务商</div>
          <div class="d2">构建新型价值信任体系</div>
        </div>
      </div>
    </div>

    <!-- <img class="bg" src="../../assets/home/pic.png" /> -->

    <div class="item1 main-content" style="border-bottom: 1px solid #efefef;">
      <div class="title">
        <span>技术优势</span>
        <span class="b-line"></span>
      </div>

      <div class="mitem-pan">
        <div class="mitem">
          <span class="img-box">
            <img src="../../assets/home/icon1.png" />
          </span>
          <span class="t1">区块链</span>
          <span class="t2"
            >根据商业模式和业务模式深度定制<br />高性能、高可用和高安全的区块链技术服务</span
          >
        </div>
        <div class="mitem">
          <span class="img-box">
            <img src="../../assets/home/icon2.png" />
          </span>
          <span class="t1">大数据</span>
          <span class="t2"
            >行业大数据解决方案<br />区块链+数据仓库<br />流式大数据实时处理技术</span
          >
        </div>
        <div class="mitem">
          <span class="img-box">
            <img src="../../assets/home/icon3.png" />
          </span>
          <span class="t1">人工智能AI</span>
          <span class="t2"
            >“区块链集成人工智能”<br />赋能新商业产业业数字化<br />搭建数字世界与实体经济的桥梁</span
          >
        </div>
      </div>
    </div>
    <div class="item1  main-content" style="border-bottom: 1px solid #efefef;">
      <div class="title">
        <span>解决方案</span>
        <span class="b-line"></span>
      </div>
      <div class="mitem-pan2" v-if="!isMobile">
        <a-row
          type="flex"
          justify="space-between"
          :gutter="[16, 16]"
          align="top"
        >
          <a-col :span="16">
            <div>
              <img src="../../assets/home/pic1.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/trace">
                  <span>区块链溯源解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  区块链与农业、工业等产品供应链深度结合。<br />产品全周期上链、生产、消费、流通均可追踪服务。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div>
              <img src="../../assets/home/pic2.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/financial">
                  <span>区块链金融解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  融合区块链的数字供应链金融平台，降低产业链资金<br />结算、融资成本，促进供应链生态良性发展。
                </div>
              </div>
            </div>
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-between"
          :gutter="[16, 16]"
          align="top"
          style=" margin: 8px -8px;"
        >
          <a-col :span="8">
            <div>
              <img src="../../assets/home/pic3.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/digital">
                  <span>区块链数字政务解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  区块链技术能够打通政务“数据孤岛”、追溯数据<br />流通过程、赋能电子政务，助力智慧政府落地。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="16">
            <div>
              <img src="../../assets/home/pic4.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/software">
                  <span>区块链软件解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  提供智能合约/Dapp定制开发服务，根据不同的业务需求，编写<br />贴合所需应用场景的智能合约。
                </div>
              </div>
            </div>
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-between"
          :gutter="[16, 16]"
          align="top"
        >
          <a-col :span="8">
            <div>
              <img src="../../assets/home/pic5.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/chainChange">
                  <span>全栈链改解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  通过链经营和传递价值信息，充分应用区块链技术<br />和治理模式，把股权公司改造为区块链经济组织
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div>
              <img src="../../assets/home/pic6.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/copyright">
                  <span>区块链版权解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  解决版权确权、版权存证、版权保护、版权交易等<br />问题，解决了传统确权机制低效的问题。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div>
              <img src="../../assets/home/pic7.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/governance">
                  <span>数据治理解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  区块链+数据治理可应用于数字城市、智慧城市、<br />智慧医疗、电子票务等场景。
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="mobile-pan2-box" v-else>
        <a-row :gutter="16">
          <a-col :span="24">
            <div class="item-box">
              <img src="../../assets/home/pic1.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/trace">
                  <span>区块链溯源解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  区块链与农业、工业等产品供应链深度结合。<br />产品全周期上链、生产、消费、流通均可追踪服务。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <img src="../../assets/home/pic2.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/financial">
                  <span>区块链金融解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  融合区块链的数字供应链金融平台，降低产业链资金<br />结算、融资成本，促进供应链生态良性发展。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <img src="../../assets/home/pic3.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/digital">
                  <span>区块链数字政务解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  区块链技术能够打通政务“数据孤岛”、追溯数据<br />流通过程、赋能电子政务，助力智慧政府落地。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div>
              <img src="../../assets/home/pic4.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/software">
                  <span>区块链软件解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  提供智能合约/Dapp定制开发服务，根据不同的业务需求，编写<br />贴合所需应用场景的智能合约。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <img src="../../assets/home/pic6.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/copyright">
                  <span>区块链版权解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  解决版权确权、版权存证、版权保护、版权交易等<br />问题，解决了传统确权机制低效的问题。
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div>
              <img src="../../assets/home/pic7.png" />
              <div class="jj-mp">
                <router-link class="t1" to="/solution/governance">
                  <span>数据治理解决方案</span>
                  <a-icon type="right" />
                </router-link>
                <div class="t2">
                  区块链+数据治理可应用于数字城市、智慧城市、<br />智慧医疗、电子票务等场景。
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <div class="item1  main-content" style="max-width: 1024px;margin: 0 auto;">
      <div class="title">
        <span>鲸势产品</span>
        <span class="b-line"></span>
      </div>
      <div class="mitem-pan3" v-if="!isMobile">
        <a-row type="flex" justify="space-between" align="bottom">
          <a-col class="mborder" :span="11">
            <div class="con1">
              <img src="../../assets/home/pic8.png" />
              <div class="con2">
                <div class="t1">鲸势BOX区块链一体机</div>
                <div style="margin-top: 30px;">
                  <router-link class="t1" to="/product/one">
                    <a-button ghost>
                      查看详情
                    </a-button>
                  </router-link>
                </div>
              </div>
            </div>
            <div class="content">
              鲸势BOX集边缘计算服务器、物联网节点和区块链运行平台与一体，
              通过千兆网、4G/5G/WiFi/NB-IoT/Zigbee/Ethernet/CAN/RS-485等
              通信接口实现双向高速数据交换。保证上链更简单、更安全、更可靠，保
              障数据共享与交换安全，信息传递与协同需要高效。
            </div>
          </a-col>

          <a-col class="mborder" :span="11">
            <div class="con1">
              <img src="../../assets/home/pic9.png" />
              <div class="con2">
                <div class="t1">鲸势区块链溯源平台</div>
                <div style="margin-top: 30px;">
                  <a-button ghost>
                    <a target="_blank" href="https://dgadm.jstrace.cn">
                      进入后台
                    </a>
                  </a-button>
                </div>
              </div>
            </div>
            <div class="content">
              鲸势区块链溯源服务平台安全追溯系统，采用先进的物联网、防伪鉴真
              等技术，为产品建立“身份证”制度，实现对产地环境、原材料、产品生产加工过程、质量检测、加工储运等质量安全关键环节全程可追溯，帮助企业打造高端产品品牌，帮助政府实现全程安全监管。
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="mobile-pan3-box" v-else>
        <a-row>
          <a-col class="mborder" :span="24">
            <div class="con1">
              <img src="../../assets/home/pic8.png" />
              <div class="con2">
                <div class="t1">鲸势BOX区块链一体机</div>
                <div style="margin-top: 30px;">
                  <router-link class="t1" to="/product/one">
                    <a-button ghost>
                      查看详情
                    </a-button>
                  </router-link>
                </div>
              </div>
            </div>
            <div class="content">
              鲸势BOX集边缘计算服务器、物联网节点和区块链运行平台与一体，
              通过千兆网、4G/5G/WiFi/NB-IoT/Zigbee/Ethernet/CAN/RS-485等
              通信接口实现双向高速数据交换。保证上链更简单、更安全、更可靠，保
              障数据共享与交换安全，信息传递与协同需要高效。
            </div>
          </a-col>

          <a-col class="mborder" :span="24">
            <div class="con1">
              <img src="../../assets/home/pic9.png" />
              <div class="con2">
                <div class="t1">鲸势区块链溯源平台</div>
                <div style="margin-top: 30px;">
                  <a-button ghost>
                    <a target="_blank" href="https://dgadm.jstrace.cn">
                      进入后台
                    </a>
                  </a-button>
                </div>
              </div>
            </div>
            <div class="content">
              鲸势区块链溯源服务平台安全追溯系统，采用先进的物联网、防伪鉴真
              等技术，为产品建立“身份证”制度，实现对产地环境、原材料、产品生产加工过程、质量检测、加工储运等质量安全关键环节全程可追溯，帮助企业打造高端产品品牌，帮助政府实现全程安全监管。
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="item1  main-content">
      <div class="mitem-pan4">
        <img src="../../assets/home/pic10.png" />
        <div class="content">
          <div class="title2" v-bind:class="{ 'mobile-title': isMobile }">
            <span>合作伙伴</span>
            <span class="b-line"></span>
          </div>
          <div
            class="content-item-box"
            v-bind:class="{ 'mobile-content-item': isMobile }"
          >
            <span style="text-align: center;">
              <span class="t1">100+</span><br />
              <span class="t2">服务企业</span>
            </span>
            <!-- <span
              style="width: 1px;height: 36px; display: inline-block;margin: 0 150px;    background: white;"
            ></span> -->
            <span style="text-align: center;">
              <span class="t1">300+</span><br />
              <span class="t2">实施方案</span>
            </span>
          </div>
          <div class="content-bottom-img">
            <img src="../../assets/home/pic11.png" />
          </div>
        </div>
      </div>
    </div>
    <contact-page></contact-page>
  </div>
</template>

<script>
import ContactPage from "../contact/index";

export default {
  components: { ContactPage },
  props: {},
  data() {
    return {
      isMobile: this.$store.getters.isMobile,
    };
  },
  watch: {
    "$store.getters.isMobile"(newVal, oldVal) {
      this.isMobile = newVal;
    },
  },
  computed: {},

  mounted() {},
};
</script>
<style lang="scss" scoped>
.home-page {
  position: relative;
  width: 100%;
  .home-top-img-bg-box::before {
    padding-top: 50% !important;
  }
  .home-top-img-bg-box {
    width: 100vw;
    background: url("../../assets/home/pic.png") no-repeat;
    background-size: 100% 100%;
    padding: 20px 0;
    .home-top-content {
      width: 100vw;
      height: 100%;
    }
    .main-content {
      height: 100%;

      .d1 {
        font-size: 2.8125rem;
        font-weight: 600;
        color: #ffffff;
        line-height: 3.9375rem;
        letter-spacing: 1px;
      }

      .d2 {
        font-size: 1.75rem;
        font-weight: 300;
        color: #ffffff;
        line-height: 2.625rem;
        letter-spacing: 1px;
        margin: 1.125rem 0;
      }
    }
  }

  .item1 {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 4rem;
    .b-line {
      margin-top: 12px;
      display: inline-block;
      width: 48px;
      height: 2px;
      background: linear-gradient(223deg, #0781ff 0%, #31a3ff 100%);
    }
    .title,
    .title2 {
      font-size: 2.375rem;
      font-weight: 800;
      color: #444444;
      line-height: 3.5625rem;
      letter-spacing: 1px;
      margin: 2rem 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .title2 {
      color: #ffffff;
    }
    .mitem-pan {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }

    .mitem-pan2,
    .mobile-pan2-box {
      position: relative;
      margin: 1rem auto;
      img {
        display: block;
        width: 100%;
        height: 340px;
      }

      .jj-mp {
        position: absolute;
        left: 1.375rem;
        bottom: 2.25rem;
        z-index: 1;

        .t1 {
          font-size: 1.5rem;
          font-weight: bold;
          color: #ffffff;
          line-height: 2.25rem;

          i {
            font-size: 1rem;
            margin-left: 1rem;
          }
        }

        .t1:hover {
          color: #2b9eff;
        }

        .t2 {
          font-size: 0.75rem;
          font-weight: 400;
          color: #ffffff;
          line-height: 1.5625rem;
          margin-top: 1.25rem;
        }
      }
    }

    .mobile-pan2-box {
      img {
        height: 150px;
      }
      .ant-col {
        margin: 10px 0;
      }
      .t1 {
        font-size: 14px !important;
      }
      .t2 {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 行数*/
        -webkit-box-orient: vertical;
      }
    }

    .mitem-pan3,
    .mobile-pan3-box {
      img {
        width: 100%;
      }

      .con1 {
        position: relative;
      }

      .con2 {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        flex-direction: column;
      }

      .mborder {
        background: #ffffff;
        box-shadow: 0px 0px 48px 0px rgba(78, 136, 187, 0.2);
      }

      .content {
        margin: 20px 32px 50px 32px;
        font-size: 12px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #444444;
        line-height: 25px;
        position: relative;
      }

      .t1 {
        font-size: 28px;
        font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
        font-weight: 800;
        color: #ffffff;
        line-height: 42px;
      }
    }
    .mobile-pan3-box {
      .ant-col {
        margin-bottom: 20px;
      }
    }

    .mitem-pan4 {
      position: relative;
      width: 100%;
      .content {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;

        .t1 {
          font-size: 2.375rem;
          font-family: Helvetica;
          color: #ffffff;
          line-height: 2.875rem;
          letter-spacing: 1px;
        }

        .t2 {
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
        }
      }

      .content-item-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 50%;
        @media screen and(min-width:750px) {
          margin: 3rem 0;
        }
      }
      .content-bottom-img {
        text-align: center;
        img {
          width: 50%;
        }
      }

      .mobile-title {
        margin: 0;
        font-size: 20px;
        .b-line {
          margin-top: 0;
        }
      }
      .mobile-content-item {
        margin: 5px 0;
        .t1 {
          font-size: 18px;
        }
        .t2 {
          font-size: 16px;
        }
      }
      img {
        width: 100%;
      }
    }

    .mitem {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 230px;

      .img-box {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-content: center;

        img {
          margin: auto;
        }
      }

      .t1 {
        margin: 1.2rem 0;
        font-size: 16px;
        font-family: NotoSansKannada-Medium, NotoSansKannada;
        font-weight: 600;
        color: #444444;
        line-height: 22px;
      }

      .t2 {
        font-size: 12px;
        font-family: NotoSansKannada-Light, NotoSansKannada;
        font-weight: 300;
        color: #444444;
        line-height: 22px;
        text-align: center;
      }
    }
  }
}
</style>
